<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Diploma Sys</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="../bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="../bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="../bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="../bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="index.html" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>LT</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Diploam</b>System</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <img th:src="${User.getImage()}"  class="user-image" alt="User Image">
              <span class="hidden-xs" th:text="${User.getName()}"></span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img th:src="${User.getImage()}" class="img-circle" alt="User Image">

                <p>
                  <span th:text="${User.getName()}"></span>
                  <small  th:text="'学历编号 ：'+${User.getEduHash()}"></small>
                  <small  th:text="'认证时间 ：'+${User.getTime()}"></small>

                </p>
              </li>
              <!--              <input id="LoginOrNologin" class="control-sidebar-subheading" value="Loginfalse" style="display: none"/>-->
                  <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-right">
                  <a class="btn btn-default btn-flat" id="Login" th:value="${Login}" th:text="${Login}"></a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img th:src="${User.getImage()}" class="img-circle" alt="User Image">
<!--          <img src="../static/dist/img/tourist.jpeg" class="img-circle" alt="User Image">-->
        </div>
        <div class="pull-left info">
          <p th:value="${User.getName()}"></p>
          <a href="#" id="Online"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">Diploma System for u</li>
        <li>
        <li class="treeview">
          <a href="#">
            <i class="glyphicon glyphicon-home"></i> <span>主 页</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="/"><i class="fa fa-circle-o"></i>用户大厅</a></li>
            <li><a href="/student/search"><i class="fa fa-circle-o"></i>学历查询</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="glyphicon glyphicon-user"></i> <span>个人中心</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="/student/personal"><i class="fa fa-circle-o"></i>个人资料</a></li>
            <li><a href="/student/apply"><i class="fa fa-circle-o"></i>申请学历</a></li>
            <li><a href="/student/regist"><i class="fa fa-circle-o"></i>用户注册</a></li>
            <li><a href="/student/revoke"><i class="fa fa-circle-o"></i>撤销学历</a></li>
            <li><a href="/student/history"><i class="fa fa-circle-o"></i>撤销历史</a></li>
          </ul>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Diploma System
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">用户大厅</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <!-- Small boxes (Stat box) -->
      <div class="row">
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-blue">
            <div class="inner">
              <h3 th:text="${StudentAccount}"></h3>
              <p>当前用户数量</p>
            </div>
            <div class="icon">
              <i class="ion ion-person-stalker"></i>
            </div>
            <a href="/student/regist" class="small-box-footer">join us<i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>

        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
              <h3 th:text="${DiplomaAccount}"></h3>
              <p>当前存有学历数量</p>
            </div>
            <div class="icon">
              <i class="icon ion-ios-book"></i>
            </div>
            <a href="/student/apply" class="small-box-footer">apply one <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <br/>
      <input type="checkbox" data-type="checkStu" id="checkStu"/>只显示存有学历用户</td>
      <br/>
<!--      <img src="dist/img/982b59b4-9d6f-4e38-82b1-fbcdc4a1351c.jpg">-->
<!--      <img src="E:\java代码\IDEA\区块链\diploma_system\src\main\resources\static\dist\img\5ca402f3-69e2-4bd9-bf8f-9cc36f6a41fe.jpg">-->
<!--      <img src="http://localhost:18902/dist/img/982b59b4-9d6f-4e38-82b1-fbcdc4a1351c.jpg">-->
<!--      <img src="http://localhost:18902/../dist/img/982b59b4-9d6f-4e38-82b1-fbcdc4a1351c.jpg">-->

      <div class="row" id="StudentTableDiv">
        <div class="col-xs-12">

          <!-- /.box -->
          <!--/*@thymesVar id="name" type="java.lang.String"*/-->
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">用户大厅：</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="StudentTable" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>用户ID</th>
                  <th>用户姓名</th>
                  <th>用户学号</th>
                  <th>用户学校</th>
                  <th>用户专业</th>
                  <th>用户教育水平</th>
                  <th>用户学历确认时间</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="s:${AllStudent}">
                  <td th:text="${s.getId()}"></td>
                  <td th:text="${s.getName()}"></td>
                  <td th:text="${s.getSid()}"></td>
                  <td th:text="${s.getSchool()}"></td>
                  <td th:text="${s.getMajor()}"></td>
                  <td th:text="${s.getEduType()}"></td>
                  <td th:text="${s.getTime()}"></td>
                  <td>
                    <button class="glyphicon glyphicon-user" data-toggle="modal"
                            th:data-whatever="${s.getId()}"
                            data-target="#showModel"></button>
                  </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                  <th>用户ID</th>
                  <th>用户姓名</th>
                  <th>用户学号</th>
                  <th>用户学校</th>
                  <th>用户专业</th>
                  <th>用户教育水平</th>
                  <th>用户学历确认时间</th>
                  <th>操作</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>

      <div class="row" id="offTittle" hidden="hidden">
        <div class="col-xs-12">

          <!-- /.box -->
          <!--/*@thymesVar id="name" type="java.lang.String"*/-->
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">已存有学历的用户：</h3>
            </div>
      <!-- /.row -->
      <table id="PassStudentTable" class="table table-bordered table-striped" hidden="hidden">
        <thead>
        <tr>
          <th>用户ID</th>
          <th>用户姓名</th>
          <th>用户学号</th>
          <th>用户学校</th>
          <th>用户专业</th>
          <th>用户教育水平</th>
          <th>用户学历确认时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="s:${PassStudent}">
          <td th:text="${s.getId()}"></td>
          <td th:text="${s.getName()}"></td>
          <td th:text="${s.getSid()}"></td>
          <td th:text="${s.getSchool()}"></td>
          <td th:text="${s.getMajor()}"></td>
          <td th:text="${s.getEduType()}"></td>
          <td th:text="${s.getTime()}"></td>
          <td>
            <button class="glyphicon glyphicon-user" data-toggle="modal"
                    th:data-whatever="${s.getId()}"
                    data-target="#showModel"></button>
          </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <th>用户ID</th>
          <th>用户姓名</th>
          <th>用户学号</th>
          <th>用户学校</th>
          <th>用户专业</th>
          <th>用户教育水平</th>
          <th>用户学历确认时间</th>
          <th>操作</th>
        </tr>
        </tfoot>
      </table>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>




  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 0.0.1
    </div>
<!--    <strong>DiplomaSystem@wust 2020&#45;&#45;毕业设计</strong> By Aiden.徐险-->
  </footer>
</div>

<div aria-hidden="true" class="modal fade" id="showModel" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
        <h4 class="modal-title" id="myModalLabel">用户详细信息：</h4>
      </div>
      <div class="modal-body">
        <form action="javascript:void(0)" id="showStudent" role="form">
          <div class="form-group">
            <label for="showStudentID">ID</label>
            <input class="form-control" id="showStudentID" name="id" readonly="readonly" type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentName">用户姓名</label>
            <input class="form-control" id="showStudentName" name="name" readonly="readonly" type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentSid">用户学号</label>
            <input class="form-control" id="showStudentSid" name="sid" readonly="readonly" type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentPassword">用户密码</label>
            <input class="form-control" id="showStudentPassword" name="password" readonly="readonly" type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentSchool">用户学校</label>
            <input class="form-control" id="showStudentSchool" name="school" readonly="readonly" type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentMajor">用户专业</label>
            <input class="form-control" id="showStudentMajor" name="major" readonly="readonly" type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentEduType">用户教育层次</label>
            <input class="form-control" id="showStudentEduType" name="eduType" readonly="readonly" type="password" />
          </div>
          <div class="form-group">
            <label for="showStudentEduHash">学历编号</label>
            <input class="form-control" id="showStudentEduHash" name="eduHash" readonly="readonly"  type="text"/>
          </div>
          <div class="form-group">
            <label for="showStudentTime">学历认证时间</label>
            <input class="form-control" id="showStudentTime" name="time" readonly="readonly" type="text"/>
          </div>
        </form>
        <div class="modal-footer">
          <button class="btn btn-success" data-dismiss="modal"   type="button">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- jQuery 3 -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="../bower_components/raphael/raphael.min.js"></script>
<!--<script src="../bower_components/morris.js/morris.min.js"></script>-->
<!-- Sparkline -->
<script src="../bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="../bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../bower_components/moment/min/moment.min.js"></script>
<script src="../bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>

<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<script>
  $(document).ready(function () {
    var table = $('#StudentTable').DataTable({
      'paging': true,
      'lengthChange': true,
      'searching': true,
      'ordering': true,
      'info': true,
      'autoWidth': true
    });
    var table = $('#PassStudentTable').DataTable({
      'paging': true,
      'lengthChange': true,
      'searching': true,
      'ordering': true,
      'info': true,
      'autoWidth': true
    });

    $("#checkStu").change(function() {
      var $div1 = $("#StudentTableDiv");
      var $div2 = $("#offTittle");
      var $temobj1 = $("<div></div>");
      var $temobj2 = $("<div></div>");
      $temobj1.insertBefore($div1);
      $temobj2.insertBefore($div2);
      if( $('#checkStu').is(':checked') ) {
        $("#PassStudentTable").removeAttr("hidden");
        $("#offTittle").removeAttr("hidden");
        $("#StudentTable").attr("hidden", "hidden")
        $("#StudentTableDiv").attr("hidden", "hidden")
      }
      else {
        $("#StudentTable").removeAttr("hidden");
        $("#StudentTableDiv").removeAttr("hidden");
        $("#PassStudentTable").attr("hidden", "hidden")
        $("#offTittle").attr("hidden", "hidden")
      }
      $div1.insertAfter($temobj2);
      $div2.insertAfter($temobj1);
      $temobj1.remove();
      $temobj2.remove();
    });

    if ($("#Login").text()=="Login in"){
      $("#Login").attr("href","/student/login");
      $("#Online").attr("class","fa fa-circle text-danger");
      $("#Online").text("  OffLine");
    }
    else
      $("#Login").attr("href","/student/signOut");

    $('#showModel').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget); // 触发事件的按钮
      var id = button.data('whatever');// 解析出data-whatever内容
      var modal = $(this);
      $.ajax({
        url: "/student/getStudentByID/" + id,
        type: "get",
        dataType: "json",
        success: function (date) {
          modal.find('#showStudentID').val(date.id);
          modal.find('#showStudentName').val(date.name);
          modal.find('#showStudentPassword').val(date.password);
          modal.find('#showStudentSid').val(date.sid);
          modal.find('#showStudentSchool').val(date.school);
          modal.find('#showStudentMajor').val(date.major);
          modal.find('#showStudentEduType').val(date.eduType);
          modal.find('#showStudentEduHash').val(date.eduHash);
          modal.find('#showStudentTime').val(date.time);
        }
      })
    })
  })


</script>
</body>
</html>
